<template>
  <uni-forms :modelValue="modelValue" v-bind="formConfig">
    <uni-forms-item
      :label="item.label"
      :name="item.name"
      v-for="(item, index) in formItems"
      :key="index"
    >
      <!-- input类型 -->
      <uni-easyinput
        v-model="modelValue[item.name]"
        :placeholder="item.placeholder || `请输入${item.label}`"
        v-if="item.type === 'input'"
        v-bind="item.bind"
      />
      <!-- checkbox类型 -->
      <uni-data-checkbox
        v-model="modelValue[item.name]"
        v-if="item.type === 'checkbox'"
        v-bind="item.bind"
      />
      <!-- switch类型 -->
      <WSwitch v-model="modelValue[item.name]" v-if="item.type === 'switch'" v-bind="item.bind" />

      <!-- numberbox类型 -->
      <uni-number-box
        v-model="modelValue[item.name]"
        v-if="item.type === 'numberbox'"
        v-bind="item.bind"
      />
      <!-- select类型 -->
      <uni-data-select
        v-model="modelValue[item.name]"
        v-if="item.type === 'select'"
        v-bind="item.bind"
      />
      <!-- 级联选择器 -->
      <uni-data-picker
        v-model="modelValue[item.name]"
        v-if="item.type === 'picker'"
        v-bind="item.bind"
      />
       
    </uni-forms-item>

  
  </uni-forms>
</template>

<script lang="ts" setup>
// 导入组件
import WSwitch from './components/WSwitch.vue'

// vue3中props的类型 不能外部引入,暂时写在这里
interface formProps {
  /**
   * 表单双向绑定的值,如果有初始值需要和formItem的name值相匹配
   */
  modelValue: AnyObject
  /**
   * uni-form的原生属性
   */
  formConfig?: AnyObject
  /**
   * 表单各项的配置
   */
  formItems: formItem[]
}

const { modelValue, formConfig, formItems } = defineProps<formProps>()


</script>

<style lang="scss" scoped></style>
